<template>
	<div class="home-content">
		<iv-row>
			<iv-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
				<div class="home-content_left">
					<section-title
						v-for="(item, _index) in titleMenus"
						:key="_index"
						:icon="item.icon"
						:main_title_key="item.main_title_key"
						:sub_title_key="item.sub_title_key"
						:tip="item.tip"
					>
						<section-title-menu-filter
							slot="section-title-menu"
							:menuIndex="_index"
							:menuFilters="titleMenuFilters"
							@refreshTitleList="refreshTitleList"
							@titleMenuFilter="titleMenuFilter"
						></section-title-menu-filter>
						<content-item
							slot="section-content-item"
							v-for="(item, _itemIndex) of item.data"
							:key="_index + '-' + _itemIndex"
							:data="item"
							:overflow_count="overflowCount"
						></content-item>
					</section-title>
				</div>
			</iv-col>
			<iv-col :xs="0" :sm="0" :md="0" :lg="7">
				<div class="home-content_right">
					<recommend-ranking></recommend-ranking>
					<hottest-ranking></hottest-ranking>
					<friendly-link></friendly-link>
					<label-wall></label-wall>
				</div>
			</iv-col>
		</iv-row>
	</div>
</template>

<script>
// import ArticleListCell from '@/components/views/Article/ArticleListCell'
// import BookNoteListCell from '@/components/views/BookNote/BookNoteListCell'
// import BookListCell from '@/components/views/Book/BookListCell'
// import ArticlePageHeader from '@/components/views/Article/ArticlePageHeader'
// import ArticlePageContent from '@/components/views/Article/ArticlePageContent'
// import ArchiveListTimeTitle from '@/components/views/Archive/ArchiveListTimeTitle'
// import ArchiveListCell from '@/components/views/Archive/ArchiveListCell'
import SectionTitle from '@/views/module/sectiontitle/index';
import SectionTitleMenuFilter from '@/views/module/sectiontitle/title-menu-filter';
import ContentItem from '@/components/content-item';
import RecommendRanking from '@/views/module/panel/recommend-ranking';
import HottestRanking from '@/views/module/panel/hottest-ranking';
import FriendlyLink from '@/views/module/panel/friendly-link';
import LabelWall from '@/views/module/panel/label-wall';
export default {
	components: {
		SectionTitle,
		SectionTitleMenuFilter,
		ContentItem,
		RecommendRanking,
		HottestRanking,
		FriendlyLink,
		LabelWall
	},
	data() {
		return {
			titleMenus: [],
			titleMenuFilters: [],
			titleMenuFilterDefault: '',
			overflowCount: this.$store.getters.system_overflowCount,
			pageParam: {
				page: 1,
				limit: this.$store.getters.system_limitSize
			}
		};
	},
	created: function() {
		this.init();
	},
	methods: {
		init: function() {
			this.titleMenus = this.$cloneDeep(this.$store.getters.system_titleMenus)
			this.titleMenuFilters = this.$cloneDeep(this.$store.getters.system_titleFiles)
			this.getDefaultMenuFilterType();
			for (let item of this.titleMenus) {
				this.handList(item, this.titleMenuFilterDefault);
			}
		},
		getDefaultMenuFilterType: function() {
			for (let item of this.titleMenuFilters) {
				if (item.active) {
					this.titleMenuFilterDefault = item.type;
					break;
				}
			}
		},
		refreshTitleList: function(titleMenu = {}) {
			this.handList(this.titleMenus[titleMenu.index], titleMenu.filterType);
		},
		titleMenuFilter: function(titleMenu = {}) {
			this.handList(this.titleMenus[titleMenu.index], titleMenu.filterType);
		},
		handList: function(menu = {}, type) {
			let data = this.$cloneDeep(this.pageParam);
			data.type = type
			if (menu.data) {
				this.$set(menu, 'data', [])
			}

			let handFunction = this.$http.getApiFun(this, menu.hander);
			handFunction(data).then(res => {
				this.$set(menu, 'data', res.data)
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.home-content {
	width: auto;
	min-height: 500px;
	@media only screen and (max-width: $responsive-sm) {
		margin: 12px 12px 24px 12px;
		&_left,
		&_right {
			padding: 0;
		}
	}
	@media screen and (min-width: $responsive-sm) {
		margin: 16px 16px 32px 16px;
		&_left,
		&_right {
			padding: 0;
		}
	}
	@media screen and (min-width: $responsive-md) {
		margin: 16px 24px 32px 24px;
		&_left,
		&_right {
			padding: 0 10px;
		}
	}
	@media screen and (min-width: $responsive-lg) {
		width: 90%;
		margin: 20px auto;
		&_left,
		&_right {
			padding: 0 16px;
		}
	}
}
</style>
